<template>
	<view>
		<view class="inspect-page">
			<view class="inspect-bg">
				<image src="../../static/images/inspect/inspect-bg.png" mode=""></image>
			</view>
			<view class="inspect-top">
				<view class="inspect-top-tt">立即巡检</view>
				<view class="inspect-top-record">全面记录患者信息</view>
			</view>
			<view class="inspect-content">
				<view class="inspect-cell" @click="openUrl('/pages/inspect/inspectAbnormal')">
					<view class="inspect-cell-title">例行巡检</view>
					<view class="inspect-cell-line"></view>
					<view class="inspect-cell-desc">每天登记患者信息，随手记录 </view>
					<view class="inspect-cell-pic">
						<image src="../../static/images/inspect/cell1.png" mode=""></image>
					</view>
				</view>
				<view class="inspect-cell" @click="openUrl('/pages/inspect/inspectRecord')">
					<view class="inspect-cell-title">巡检记录</view>
					<view class="inspect-cell-line"></view>
					<view class="inspect-cell-desc">记录巡检点点滴滴</view>
					<view class="inspect-cell-pic">
						<image src="../../static/images/inspect/cell2.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}
</script>

<style lang="scss">
	.inspect-page {
		padding-top: 180rpx;
		position: relative;
		min-height: calc(100vh - 50px);
		background-color: #FFF;
	}

	.inspect-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 550rpx;
	}

	.inspect-bg image {
		width: 100%;
		height: 100%;
	}

	.inspect-top {
		height: 330rpx;
		padding: 32rpx 30rpx;
		position: relative;
		z-index: 111;

		.inspect-top-tt {
			font-size: 50rpx;
			color: #fff;
			line-height: 70rpx;
			margin-bottom: 20rpx;
		}

		.inspect-top-record {
			font-size: 28rpx;
			color: #fff;
			line-height: 44rpx;
		}
	}

	.inspect-content {
		position: relative;
		z-index: 111;
		background-color: #fff;
		border-radius: 36rpx 36rpx 0 0;
		padding: 50rpx 30rpx 0;
	}

	.inspect-cell {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 3rpx 27rpx rgba(0, 73, 114, 0.16);
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;

		.inspect-cell-title {
			font-size: 34rpx;
			line-height: 40rpx;
			color: #333333;
		}

		.inspect-cell-pic {
			width: 230rpx;
			height: 170rpx;
			position: absolute;
			bottom: -4rpx;
			right: -10rpx;
		}

		.inspect-cell-pic image {
			width: 100%;
			height: 100%;
		}

		.inspect-cell-line {
			width: 30rpx;
			height: 2rpx;
			margin: 9px 0 10px;
			background-color: #00a4e8;
		}

		.inspect-cell-desc {
			font-size: 28rpx;
			color: #596371;
			line-height: 40rpx;
		}
	}
</style>
